<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的嵌套</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 

    -->

    <div id="app">
        <h2>{{Name}}</h2>
        <hr>
        <!-- 第三部使用组件标签 -->
        <app></app>
    </div>
</body>
<script>
    

    //第一步定义组件  Vue.extend(option) 可以简写为 option 
    const student = {
        template:`
        <div>
            <h3>学生名称:{{name}}</h3>
            <h3>学生年龄:{{age}}</h3>
        </div>
        `,
        //组件的data不能配置对象，考虑到复用的关系，多个组件引用同一个对象会造成显示同步，所以只能配置函数返回对象
        data(){
            return {
                name:'徐方君',
                age:29
            }
        }
    }

    const school = {
        template:`
        <div>
            <h3>学校名称:{{name}}</h3>
            <h3>学校年龄:{{age}}</h3>
        </div>
        `,
        data(){
            return {
                name:'二圣小学',
                age:200
            }
        },
        components:{
            student:student
        }
    }

    const hello = {
        template:`
        <div>
            <h3>{{msg}}</h3>
        </div>
        `,
        data(){
            return {
                msg:'你好,baby',
            }
        }
    }

    const app = {
        template:`
        <div>
            <hello></hello>
            <school>
                <student></student>
            </school>
        </div>
        `,
        components:{
            school:school,
            hello:hello
        }
    }

    //第二部 注册组件
    var vm = new Vue({
       el:'#app',
       data:{
           Name:'张三',
       },
       components:{
            //注意这里是局部注册
            app:app
       }
    })





</script>
</html>